import { useEffect, useState } from 'react'

function App() {
  console.log('entery App')
  const [count, setCount] = useState(0)
  const [theme, setTheme] = useState('lightseagreen')

  // useState Hook 的补充说明：
  // 对于 useState Hook 返回的更新状态的函数，有两种调用方式：
  // 1. setCount(newState)
  // 2. setCount(prev => newState): 参数是一个回调函数，其中，prev 表示上一次状态值；返回值 newState 表示要更新的值

  // 注意：一般情况下，使用哪一种都行
  // 但是，在某些特殊情况下，就需要使用第二种方式了

  const addHandler = () => {
    setCount((prev) => {
      return prev + 1
    })
  }

  useEffect(() => {
    console.log('entery useEffect')

    // 要在定时器代码中修改状态时，为了避免重复创建定时器，推荐使用第二种方式
    // 因为回调函数的方式对外层数据没有依赖，而有没有依赖会影响 useEffect 等 Hook 的执行过程
    let timerId = window.setInterval(() => {
      setCount((count) => count + 1)
    }, 1000)

    return () => {
      console.log('entery destory')
      clearInterval(timerId)
    }
  }, [count])

  return (
    <div style={{ backgroundColor: theme, padding: 10 }}>
      <button
        onClick={() => setTheme(theme === 'lightseagreen' ? 'lightskyblue' : 'lightseagreen')}
      >
        切换主题
      </button>

      <h1>计数器：{count}</h1>
      <button onClick={addHandler}>+1</button>
    </div>
  )
}

export default App
